<template>
	<view class="stats-container">
		<!-- 姓名 -->
		<view class="stat-item">
			<!-- 显示姓名和编辑按钮 -->
			<text class="stat-title">姓名:</text>
			<view class="static-text" @click="openEditModal('nickname')">
				<!-- 显示用户姓名 -->
				<text>{{ userProfile.nickname }}</text>
				<!-- 编辑图标，点击打开编辑模态框 -->
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>

		<!-- 性别 -->
		<view class="stat-item">
			<text class="stat-title">性别:</text>
			<view class="static-text" @click="openEditModal('gender')">
				<text>{{ selectedGenderText }}</text>
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>

		<!-- 年龄 -->
		<view class="stat-item">
			<text class="stat-title">年龄:</text>
			<view class="static-text" @click="openEditModal('age')">
				<text>{{ userProfile.age }}</text>
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>

		<!-- 身高 -->
		<view class="stat-item">
			<text class="stat-title">身高 (cm):</text>
			<view class="static-text" @click="openEditModal('height')">
				<text>{{ userProfile.height }}</text>
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>

		<!-- 体重 -->
		<view class="stat-item">
			<text class="stat-title">体重 (kg):</text>
			<view class="static-text" @click="openEditModal('weight')">
				<text>{{ userProfile.weight }}</text>
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>

		<!-- 生日 -->
		<view class="stat-item">
			<text class="stat-title">生日:</text>
			<view class="static-text" @click="openEditModal('birthday')">
				<text>{{ formattedBirthday }}</text>
				<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
					<path
						d="M730.564 550.46c-0.36 0.359-0.856 0.449-1.214 0.788l-359.113 394.661c-21.692 21.242-56.657 21.489-78.054 0.518-21.398-20.972-21.173-55.193 0.54-76.459l325.045-357.221-325.698-357.92c-21.69-21.263-21.713-55.689-0.045-76.929 21.691-21.218 56.837-21.196 78.55 0.045l359.966 395.608c21.691 21.241 21.713 55.689 0.022 76.908z"
						fill="#272536"></path>
				</svg>
			</view>
		</view>
		<!-- 编辑模态框 -->
		<view v-if="showModal" class="modal" style="margin-top: -80px;">
			<view class="modal-content">
				<!-- 模态框标题，显示当前正在编辑的字段名称 -->
				<text class="modal-title">编辑 {{ modalFieldLabel }}</text>

				<!-- 根据字段类型显示不同的输入组件 -->
				<!-- 如果字段是昵称，则显示文本输入框 -->
				<input v-if="modalField === 'nickname'" v-model="modalValue" placeholder="输入新昵称" />
				<!-- 如果字段是性别，则显示下拉选择框 -->
				<!-- 使用radio组件选择性别 -->
				<view v-if="modalField === 'gender'" class="gender-options">
					<radio-group v-model="modalValue" @change="handleGenderChange">
						<label class="radio-label">
							<radio value="1" :checked="modalValue === '1'"></radio>男
						</label>
						<label class="radio-label">
							<radio value="0" :checked="modalValue === '0'"></radio>女
						</label>
						<label class="radio-label">
							<radio value="2" :checked="modalValue === '2'"></radio>其他
						</label>
					</radio-group>
				</view>
				<!-- 如果字段是年龄、身高、体重，则显示数字输入框 -->
				<input v-if="modalField === 'age'" type="number" v-model="modalValue" placeholder="输入新年龄" />
				<input v-if="modalField === 'height'" type="number" v-model="modalValue" placeholder="输入新身高" />
				<input v-if="modalField === 'weight'" type="number" v-model="modalValue" placeholder="输入新体重" />
				<!-- 如果字段是生日，则显示日期选择框 -->
				<!-- 使用picker组件选择生日 -->
				<picker v-if="modalField === 'birthday'" class="picker" mode="date" @change="bindCancelDateChange"
					:value="modalValue">
					<view class="picker">
						{{ modalValue || '请选择日期' }}
					</view>
				</picker>


				<!-- 模态框按钮，保存或取消操作 -->
				<view class="modal-buttons">
					<!-- 点击保存按钮时调用 saveChanges 方法 -->
					<button @click="saveChanges">保存</button>
					<!-- 点击取消按钮时调用 closeModal 方法 -->
					<button @click="closeModal">取消</button>
				</view>
			</view>
		</view>
		<button @click="updateUserProfile" style="width: 70%;">保存</button>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// 用户资料数据
				userProfile: {
					nickname: '张三',
					gender: '2',
					age: 25,
					height: 175,
					weight: 70,
					birthday: '2005-01-01'
				},
				// 控制模态框显示
				showModal: false,
				// 当前编辑的字段名
				modalField: '',
				// 当前编辑字段的标签
				modalFieldLabel: '',
				// 当前编辑字段的值
				modalValue: ''
			};
		},
		computed: {

			formattedBirthday() {
				// 将生日格式化为中文格式：2005年01月01日
				const [year, month, day] = this.userProfile.birthday.split('-');
				return `${year}年${month}月${day}日`;
			},
			// 根据性别显示相应的文本
			selectedGenderText() {
				switch (this.userProfile.gender) {
				        case '1':
				            return '男';
				        case '0':
				            return '女';
				        case '2':
				            return '未知';
				        default:
				            return '未设置'; // 可选的默认值
				    }
			}
		},
		methods: {
			
			bindCancelDateChange(e) {
				// 获取选择的日期并更新 userProfile 的生日
				this.modalValue = e.target.value;
				this.userProfile.birthday = this.modalValue;
			},
			// 修改后台数据
			updateUserProfile() {
				try {
					const payload = {
						nickname: this.userProfile.nickname,
						gender: this.userProfile.gender,
						age: this.userProfile.age,
						height: this.userProfile.height,
						weight: this.userProfile.weight,
						birthday: this.userProfile.birthday
					};

					const response = axios.post('/api/user/updateProfile', payload)

					if (response.status === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}

			},
			// 打开编辑模态框
			openEditModal(field) {
				// 设置当前编辑的字段名和标签
				this.modalField = field;
				this.modalFieldLabel = this.getFieldLabel(field);
				// 设置模态框中输入的值
				this.modalValue = this.userProfile[field];
				// 显示模态框
				this.showModal = true;
			},
			// 获取字段的标签名
			getFieldLabel(field) {
				switch (field) {
					case 'nickname':
						return '昵称';
					case 'gender':
						return '性别';
					case 'age':
						return '年龄';
					case 'height':
						return '身高';
					case 'weight':
						return '体重';
					case 'birthday':
						return '生日';
					default:
						return '';
				}
			},
			// 保存修改的值
			saveChanges() {
				// 更新用户资料中的对应字段
				this.userProfile[this.modalField] = this.modalValue;
				// 关闭模态框
				this.closeModal();
			},
			//修改性别实时时修改
			handleGenderChange(event) {
			      console.log('选中的性别值:', event.detail.value); // 打印选中的性别值
			      this.modalValue = event.detail.value;
			    },
			// 关闭模态框
			closeModal() {
				this.showModal = false;
				this.modalField = '';
				this.modalValue = '';
			}

		}
	};
</script>

<style scoped>
	.gender-options {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 15px;
	}

	.radio-label {
		font-size: 16px;
		margin: 10px 0;
		color: #333;
	}

	/* picker 的容器样式 */
	.picker {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: center;
		/* 水平居中对齐 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 4px;
		/* 圆角边框 */
		padding: 10px;
		/* 内边距 */
		cursor: pointer;
		/* 鼠标悬停时显示手型光标 */
		background-color: #fff;
		/* 背景颜色 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	/* picker 在获得焦点或悬停时的样式 */
	.picker:hover {
		border-color: #4CAF50;
		/* 悬停时边框颜色 */
	}

	/* picker 的文本样式 */
	.picker view {
		font-size: 16px;
		/* 字体大小 */
		color: #333;
		/* 字体颜色 */
	}

	/* 在 picker 打开时的模态框样式 */
	.modal {
		position: fixed;
		/* 固定定位 */
		top: 50%;
		/* 垂直居中 */
		left: 50%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		/* 居中效果 */
		background-color: rgba(255, 255, 255, 0.9);
		/* 半透明白色背景 */
		padding: 20px;
		/* 内边距 */
		border-radius: 8px;
		/* 圆角边框 */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		z-index: 1000;
		/* 在最上层 */
	}

	.profile-container {
		padding: 20px;
	}

	/* 容器样式 */
	.stats-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	/* 每个统计项的样式 */
	.stat-item {
		width: 100%;
		margin: 10px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		background-color: #f9f9f9;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	}

	/* 标题文本样式 */
	.stat-title {
		font-size: 16px;
		color: #333;
		margin-right: 10px;
		font-weight: bold;
	}

	/* 静态文本样式 */
	.static-text {
		display: flex;
		align-items: center;
		font-size: 15px;
		color: #555;
	}

	/* 编辑图标样式 */
	.icon {
		margin-left: 10px;
		cursor: pointer;
		fill: #4CAF50;
		transition: transform 0.2s ease-in-out;
	}

	.icon:hover {
		transform: scale(1.2);
	}

	/* 按钮样式 */
	button {
		padding: 8px 16px;
		font-size: 14px;
		color: white;
		background-color: #4CAF50;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease;
		margin-top: 20px;
	}

	button:hover {
		background-color: #45A049;
	}

	/* 输入框样式 */
	input[type="text"],
	input[type="number"],
	input[type="date"] {
		width: 70%;
		padding: 8px;
		margin-top: 5px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		background-color: #fff;
		color: #333;
	}

	/* 模态框样式 */
	.modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
		z-index: 1000;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.close-button:hover {
		background-color: #e53935;
	}

	.modal-content {
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		width: 300px;
	}

	.modal-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}

	.modal-buttons button {
		margin-top: 10px;
	}

	.stat-value {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.static-text {
		font-size: 16px;
		color: #555;
		font-weight: normal;
		margin: 5px;
		line-height: 1.5;
		float: right;

	}

	.icon {
		fill: #272536;
		cursor: pointer;
		vertical-align: middle;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>